什麼是生命週期？就像人有生老病死，component也有類似這樣的概念，了解生命週期可以讓我們知道如何在「對」的時間做「對」的事。

從官方提供的這張圖表，可以看出react生命週期的三大階段

• 創建component (componentDidMount)
• 更新component(componentDidUpdate)
• 銷毀component (componentWillUnmount)

需要注意的是class component自帶生命週期，而functional component需要透過react hook才能擁有生命週期。

生命週期的執行順序

mounting階段

1. constructor ：初始化
2. static getDerivedStateFromProps
3. componentWillMount（即將廢棄
4. render ：渲染
5. componentDidMount： DOM掛載完成

updating階段

1. componentWillReceiveProps ：props改變時才觸發（即將廢棄
2. static getDerivedStateFromProps
3. shouldComponentUpdate
4. componentWillUpdate（即將廢棄
5. render
6. getSnapshotBeforeUpdate ：component更新前執行
7. componentDidUpdate ：component已經更新完畢

Unmount 銷毀

componentWillUnmount : component即將銷毀

以下針對較常用的生命週期來做介紹

• constructor :用來初始化的地方，還沒掛載到DOM的時候，假設沒有寫super() ，就調用this的話會報錯
• render：必須實作的，回傳JSX
• componentDidMount: DOM已經掛載完成 ，在這個階段可以呼叫api來更新DOM ，適合做一些初始化的工作
• componentDidUpdate: 當props or state更新 ，就會觸發組件更新DOM，所以千萬不要在這個階段setState，會造成無限循環
• componentWillUnmount: component從DOM被移除 ，在這階段可以用來清除一些計時器

接下來介紹一些比較冷門的生命週期，勾選上面的show less common lifecycle，就可以看到一些不常用的生命週期

• getDerivedStateFromProps()： 當props、state改變就會觸發，在初始化的時候也會觸發一次
• shouldComponentUpdate：讓你自己判斷是否要更新，如果回傳false這邊就不在往下執行render， 所以這邊可以做一些效能的優化
• getSnapshotBeforeUpdate ：在更新DOM和Refs之前會觸發

額外補充

componentDidCatch() 錯誤邊界，個人覺得跟try catch概念有點像，捕捉子組件的錯誤，不因為錯誤而影響到父組件。

附上react開發者製作的生命週期流程圖，跟著流程圖跑一遍會比較容易理解生命週期的執行順序和觸發時機。